<!--  
* @Author: cuixingyu  
* @Date: 2024/7/20 11:12  
* @Description: 告警类型占比
-->
<template>
  <div class="chart" ref="equipmentChart"></div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, toRefs, watch } from 'vue';
  import * as echarts from 'echarts';
  import { fontSize } from '/@/utils/echartsRem';
  import { normalize } from 'path';

  const props = defineProps({
    // 时间范围
    chartData: {
      type: Array,
      default: () => [
        {
          num: 0,
          name: '暂无数据',
        },
      ],
    },
  });
  const { chartData } = toRefs(props);
  let data:any = [];
  //rgb颜色随机
  // function randomRgb() {
  //   var r = Math.floor(Math.random() * 256);
  //   var g = Math.floor(Math.random() * 256);
  //   var b = Math.floor(Math.random() * 256);
  //   var rgb =  r + ',' + g + ',' + b ;
  //   return rgb;
  // }
  const equipmentChart = ref();
  watch(
    () => chartData.value,
    (val) => {
      if (val && val.length > 0) {
        data = [];
        // if (val.length > 4) {
        // for (let index = 0; index < (val.length - 4); index++) {
        //   let randomColor = randomRgb();
        // color.push({
        //   colorStart: randomRgb(0.3),
        //   colorEnd: randomRgb(0.9),
        //   solid: randomRgb(1),
        // });
        // }
        // }
        data = JSON.parse(JSON.stringify(val).replace(/num/g, 'value'));
      } else {
        data = [
          {
            num: 0,
            name: '暂无数据',
          },
        ];
      }
      init();
    },
    { immediate: false },
  );
  let color = [
    {
      colorStart: 'rgba(36, 98, 170,0.3)',
      colorEnd: 'rgba(47, 128, 198,0.9)',
      solid: 'rgba(1, 195, 255,1)',
    },
    {
      colorStart: 'rgba(39, 209, 87,0.1)',
      colorEnd: 'rgba(39, 209, 87,0.6)',
      solid: 'rgba(39, 209, 87,1)',
    },
    {
      colorStart: 'rgba(199, 109, 255,0.1)',
      colorEnd: 'rgba(199, 109, 255,0.6)',
      solid: 'rgba(199, 109, 255,1)',
    },
    {
      colorStart: 'rgba(49, 96, 237,0.1)',
      colorEnd: 'rgba(49, 96, 237,0.7)',
      solid: 'rgba(49, 96, 237,1)',
    },
    {
      colorStart: 'rgba(255, 100, 148,0.1)',
      colorEnd: 'rgba(255, 100, 148,0.7)',
      solid: 'rgba(255, 100, 148,1)',
    },
    {
      colorStart: 'rgba(252, 169, 137,0.1)',
      colorEnd: 'rgba(252, 169, 137,0.7)',
      solid: 'rgba(252, 169, 137,1)',
    },
    {
      colorStart: 'rgba(243, 255, 143,0.1)',
      colorEnd: 'rgba(243, 255, 143,0.7)',
      solid: 'rgba(243, 255, 143,1)',
    },
    {
      colorStart: 'rgba(235, 252, 253,0.1)',
      colorEnd: 'rgba(235, 252, 253,0.7)',
      solid: 'rgba(235, 252, 253,1)',
    },
    {
      colorStart: 'rgba(53, 255, 201,0.1)',
      colorEnd: 'rgba(53, 255, 201,0.7)',
      solid: 'rgba(53, 255, 201,1)',
    },
    {
      colorStart: 'rgba(153, 27, 7,0.1)',
      colorEnd: 'rgba(153, 27, 7,0.7)',
      solid: 'rgba(153, 27, 7,1)',
    },
  ];
  /** 图表初始化 */
  function init() {
    let chart = echarts.init(equipmentChart.value);
    chart.clear();
    // 计算总数
    let total = data?.map((v) => v.value)?.reduce((o, n) => o + n);
    // 计算每一个data的起始角度和结束角度 θ1和θ2
    data.reduce((o, v) => {
      v.theta1 = o;
      v.theta2 = o + v.value / total;
      return v.theta2;
    }, 0);
    // 添加渐变
    data.forEach((v, i) => {
      let ops = calc(v.theta1 * 2 * Math.PI, v.theta2 * 2 * Math.PI);
      if (v.value)
        v.itemStyle = {
          color: {
            type: 'radial',
            x: ops.center[0],
            y: ops.center[1],
            r: ops.radius,
            colorStops: [
              {
                offset: 0,
                color: color[i].colorStart,
              },
              {
                offset: 0.32,
                color: color[i].colorStart,
              },
              {
                offset: 0.95,
                color: color[i].colorEnd,
              },
              {
                offset: 0.95,
                color: color[i].solid,
              },
              {
                offset: 1,
                color: color[i].solid,
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        };
    });
    chart.setOption({
      backgroundColor: 'transparent',
      grid: {
        left: 10,
        top: 50,
        bottom: 10,
        right: 10,
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
        borderColor: 'rgba(6,17,45,0.8)',
        backgroundColor: 'rgba(6,17,45,0.8)',
        textStyle: {
          fontSize: fontSize(14),
          color: 'rgba(226, 235, 250, 1)',
        },
        formatter: '{b} : {c}%',
      },
      calculable: true, // 是否启用拖拽重计算
      series: [
        {
          type: 'pie',
          radius: '10%',
          hoverAnimation: false,
          labelLine: { show: false },
          itemStyle: { color: '#c2d7fd' },
          tooltip: { show: false },
          data: [0],
        },
        {
          type: 'pie',
          radius: ['15%', '17%'],
          hoverAnimation: false,
          labelLine: { show: false },
          itemStyle: { color: '#c2d7fd', opacity: 0.4 },
          tooltip: { show: false },
          data: [0],
        },
        {
          type: 'pie',
          radius: ['78%', '75%'],
          hoverAnimation: false,
          labelLine: { show: false },
          itemStyle: { color: '#b7cffc', opacity: 0.4 },
          tooltip: { show: false },
          data: [0],
        },
        {
          type: 'pie',
          name: '',
          radius: ['20%', '90%'],
          roseType: true,
          zlevel: 10,
          label: {
            show: true,
            formatter: (params) => {
              let datas = data;
              let target;
              var total = 0;
              for (let i = 0; i < datas.length; i++) {
                total += datas[i].value;
                if (datas[i].name == params.name) {
                  target = datas[i].value;
                }
              }
              return '{a|' + params.data.name + '   ' + '}';
            },
            rich: {
              a: {
                fontSize: fontSize(14),
                color: '#eef4ff',
                lineHeight: 50,
                align: 'right',
                padding: [0, 0, 0, fontSize(8)],
              },
            },
            height: 50,
            padding: [0, -20],
            distanceToLabelLine: 25,
            alignTo: 'none',
          },
          labelLine: {
            show: true,
            length: 10,
            length2: 15,
            lineStyle: {
              color: 'rgba(255,255,255,0.4)',
              type: 'dashed',
            },
          },
          data,
        },
      ],
    });
    const resizeObserver = new ResizeObserver(() => {
      chart.resize();
    });
    resizeObserver.observe(equipmentChart.value);
  }

  // 角度相关计算
  function calc(theta1, theta2) {
    let r = 0.5; // 半径是0.5 其实表示0.5个直径
    let inner = 0.5; // 里面镂空部分占60%  option中radius为[33%, 55%]  55 * 0.6 == 33

    let cos = Math.cos;
    let sin = Math.sin;
    let PI = Math.PI;
    let min = Math.min;
    let max = Math.max;

    let bottom = 0;
    let left = 2 * r;
    let right = 0;

    // y0: θ1对应的外部点的y值
    // y1: θ2对应的外部点的y值
    // _y0: θ1对应的内部点的y值
    // _y1: θ2对应的内部点的y值
    // x0: θ1对应的外部点的x值
    // x1: θ2对应的外部点的x值
    // _x0: θ1对应的内部点的x值
    // _x1: θ2对应的内部点的x值
    let y0 = r * (1 - cos(theta1));
    let y1 = r * (1 - cos(theta2));

    let _y0 = r * (1 - inner * cos(theta1));
    let _y1 = r * (1 - inner * cos(theta2));

    // 如果这个弧经过θ == PI的点  则bottom = 2PI
    // bottom用于之后的max计算中
    if (theta1 < PI && theta2 > PI) {
      bottom = 2 * r;
    }
    // 计算这几个点的最大最小值
    let ymin = min(_y0, _y1, y0, y1);
    let ymax = max(_y0, _y1, y0, y1, bottom);

    let x0 = r * (1 + sin(theta1));
    let x1 = r * (1 + sin(theta2));

    let _x0 = r * (1 + inner * sin(theta1));
    let _x1 = r * (1 + inner * sin(theta2));

    // 如果这个弧经过θ == PI / 2的点  则right = 2PI
    if (theta1 < PI / 2 && theta2 > PI / 2) {
      right = 2 * r;
    }
    // 如果这个弧经过θ == PI / 2 * 3的点  则left = 0
    if (theta1 < (PI / 2) * 3 && theta2 > (PI / 2) * 3) {
      left = 0;
    }
    let xmin = min(_x0, _x1, x0, x1, left);
    let xmax = max(_x0, _x1, x1, x0, right);

    return {
      // 计算圆心以及半径
      center: [(r - xmin) / (xmax - xmin), (r - ymin) / (ymax - ymin)],
      radius: r / min(xmax - xmin, ymax - ymin),
    };
  }
</script>
<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>
